<template>
    <div>
        <web-header show="company" />
        <div class="breadcrumb"> 您当前的位置：
            <router-link to="/" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">首页</router-link> &gt;
            <router-link to="/area" :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`">目的地</router-link>
            &gt;
            <span>定制游</span>
            <!-- &gt; <span>{{ destination.city }}</span> &gt; -->
        </div>
        <div class="big_box">
            <aside>

                <div class="box_a">
                    <div class="top">国内包团旅游</div>
                    <div class="bottom">
                        <ul>
                            <li>
                                <router-link to="/company/list/75">华东</router-link>
                                <router-link to="/company/list/76">海南</router-link>
                                <router-link to="/company/list/78">湖南</router-link>
                                <router-link to="/company/list/79">云南</router-link>
                                <router-link to="/company/list/80">西北</router-link>
                                <router-link to="/company/list/81">东北</router-link>
                                <router-link to="/company/list/112">福建</router-link>
                                <router-link to="/company/list/166">重庆</router-link>
                                <router-link to="/company/list/167">西藏</router-link>
                                <router-link to="/company/list/172">新疆</router-link>
                                <router-link to="/company/list/174">山东</router-link>
                                <router-link to="/company/list/175">北京</router-link>
                                <router-link to="/company/list/194">华北</router-link>
                                <router-link to="/company/list/204">江西</router-link>
                                <router-link to="/company/list/214">贵州</router-link>
                                <router-link to="/company/list/228">广西</router-link>
                                <router-link to="/company/list/245">内蒙</router-link>
                                <router-link to="/company/list/345">河北</router-link>
                                <router-link to="/company/list/302">陕西</router-link>
                                <router-link to="/company/list/343">山西</router-link>
                                <router-link to="/company/list/357">安徽</router-link>
                                <router-link to="/company/list/355">四川</router-link>
                                <router-link to="/company/list/356">湖北</router-link>
                                <router-link to="/company/list/371">河南</router-link>
                            </li>
                        </ul>

                    </div>
                </div>

                <div class="box_c" @click="selectOpen()">
                    <ul>
                        <li><img id="btn-custom-size" height="50"
                                src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_01.jpg" />
                        </li>
                        <div id="custom-size-dialogBox"></div>
                        <li><img id="btn-custom-size2" height="50"
                                src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_03.jpg" />
                        </li>
                        <li><img id="btn-custom-size3" height="50"
                                src="https://admin.hqx.com.cn/Public/Travel/images/linelist/dz_05.jpg" />
                        </li>
                    </ul>
                </div>
                <div id="left3"></div>
                <div class="box_d" style="display:none">
                    <div class="top">旅游攻略指南</div>
                    <div class="bottom">
                        <ul>
                            <!-- <volist name="tjlist" id="rs">
                                <li class="t{$key+1}"><a :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                        href="/guide/{$rs.id}.html">{$rs.title}</a></li>
                            </volist> -->
                        </ul>
                    </div>
                </div>
            </aside>
            <div class="right_box">
                <!-- <div class="screen">
                    <div class="top">
                        <ul id="line_typeArr">
                            <li><a @click="changeList('line_type', '')" :class="data.line_type == '' ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">所有线路</a></li>
                            <li><a @click="changeList('line_type', 1)" :class="data.line_type == 1 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">跟团旅游</a></li>
                            <li><a @click="changeList('line_type', 2)" :class="data.line_type == 2 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">定制旅行</a></li>
                            <li><a @click="changeList('line_type', 5)" :class="data.line_type == 5 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">包团旅游</a></li>
                            <li><a @click="changeList('line_type', 3)" :class="data.line_type == 3 ? 'active' : ''"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">当地玩乐</a></li>
                        </ul>
                    </div>
                    <div class="bottom">
                        <dl>
                            <dt>游玩天数：</dt>
                            <dd id="line_daysArr">
                                <a @click="changeList('days', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('days', 1)" :style="{ 'color': 1 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1日游</a>
                                <a @click="changeList('days', 2)" :style="{ 'color': 2 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">2-4天</a>
                                <a @click="changeList('days', 3)" :style="{ 'color': 3 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5-7天</a>
                                <a @click="changeList('days', 4)" :style="{ 'color': 4 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">8-11天</a>
                                <a @click="changeList('days', 5)" :style="{ 'color': 5 == data.days ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">11天以上</a>
                            </dd>
                        </dl>
                        <dl>
                            <dt>价格范围：</dt>
                            <dd id="priceArr">
                                <a @click="changeList('prices', '')" :title="`${destination.area}旅游`"
                                    :alt="`${destination.area}旅游`" href="javascript:void(0)">全部</a>
                                <a @click="changeList('prices', 1)"
                                    :style="{ 'color': 1 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000元以下</a>
                                <a @click="changeList('prices', 2)"
                                    :style="{ 'color': 2 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1000-3000元</a>
                                <a @click="changeList('prices', 3)"
                                    :style="{ 'color': 3 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">3000-5000元</a>
                                <a @click="changeList('prices', 4)"
                                    :style="{ 'color': 4 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">5000-1万元</a>
                                <a @click="changeList('prices', 5)"
                                    :style="{ 'color': 5 == data.prices ? '#f81580' : '' }"
                                    :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                    href="javascript:void(0)">1万元以上</a>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="orders">
                    <div class="title">综合排序：</div>
                    <ul id="orderArr">
                        <li class="t1">

                            <a v-if="data.order != 1 && data.order != 2" @click="changeList('order', 2)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 2" @click="changeList('order', 1)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                            <a v-else-if="data.order == 1" @click="changeList('order', 2)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">销量
                            </a>
                        </li>
                        <li class="t2">
                            <a v-if="data.order != 3 && data.order != 4" @click="changeList('order', 4)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 4" @click="changeList('order', 3)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                            <a v-else-if="data.order == 3" @click="changeList('order', 4)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">价位
                            </a>
                        </li>
                        <li class="t3">
                            <a v-if="data.order != 5 && data.order != 6" @click="changeList('order', 6)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 6" @click="changeList('order', 5)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                            <a v-else-if="data.order == 5" @click="changeList('order', 6)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">人气
                            </a>
                        </li>
                        <li class="t4">
                            <a v-if="data.order != 7 && data.order != 8" @click="changeList('order', 8)"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 8" @click="changeList('order', 7)" class="t2"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                            <a v-else-if="data.order == 7" @click="changeList('order', 8)" class="t1"
                                :title="`${destination.area}旅游`" :alt="`${destination.area}旅游`"
                                href="javascript:void(0)">最新
                            </a>
                        </li>
                    </ul>
                </div> -->
                <!-- 列表 -->
                <div class="line_box" id="bigbox">
                    <div v-for="item in list" :key="item.id">
                        <lineItem :item='item'></lineItem>
                    </div>


                </div>
                <div class="page_a" @click="getList">
                    <a :title="destination.city + '旅游'" :alt="destination.city + '旅游'" href="javascript:void(0)">
                        <div></div> {{ moreText }}
                    </a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <web-footer />
    <back-top />
        <popup-consult ref="RefChild"></popup-consult>

        <!-- 弹窗 -->
        <!-- 私人定制 -->
        <!-- 团队定制 -->
    </div>
</template>

<script setup>


import { area_details, line_items, area_Destination, theme_itemsByArea, connect_items } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute, RouterLink } from 'vue-router';
import lineItem from '@/components/list-item/lineItem.vue'

const route = useRoute()
let fullPath = route.fullPath; // 保存当前路径
let data = ref({
    area: Number(route.params.area),//目的地
    // line_type: 2, //出游方式
    page: 1,
    limit: 5,
});
let list = ref([]);


let destination = ref({}); // 所有信息 
let moreText = ref('展开更多精彩体验') // 展开更多
let recommendList = ref([]); // 推荐

// 获取子组件的引用
const RefChild = ref();

const selectOpen = () => {
    if (RefChild.value) {
        RefChild.value.open();
    }
}

// 初始化 
const initialize = async () => {
    fullPath = route.fullPath; // 保存当前路径
    // 初始化数据
    data.value = {
        area: Number(route.params.area),//目的地
        // line_type: 2, //出游方式
        page: 1,
        limit: 5,
    };
    list.value = [];
    moreText.value = '展开更多精彩体验';

    // 初始化列表
    await getList();

}



// 翻页 持续获取list数据
const getList = async () => {
    if (moreText.value == '没有更多了') {
        return;
    }
    let res = await line_items(data.value);
    list.value = [...list.value, ...res.data];
    data.value.page++;
    if (res.data.length == 0) {
        moreText.value = '没有更多了';
    }
}

// 改变data.value时切换列表
const anewList = async () => {
    let res = await line_items(data.value);
    list.value = [...res.data];
    data.value.page = 2;
    moreText.value = res.data.length == 0 ? '没有更多了' : '展开更多精彩体验';
}


// // data值改变
// const changeList = (key, value) => {
//     switch (key) {
//         case 'line_type':
//             data.value.line_type = value;
//             break;
//         case 'plays':
//             data.value.plays = value;
//             break;
//         case 'theme':
//             data.value.theme = value;
//             break;
//         case 'plays':
//             data.value.plays = value;
//             break;
//         case 'prices':
//             data.value.prices = value;
//             break;
//         case 'days':
//             data.value.days = value;
//             break;
//         case 'order':
//             data.value.order = value;
//             break;
//         default:
//             break;
//     }
//     data.value.page = 1;
//     anewList();
// }


onMounted(async () => {
    initialize();


});


</script>

<style lang="scss" scoped>
@import "../../css/main_line_list.css";
</style>
